<template>
  <div>
    <!-- 面包屑 -->
    <el-brand></el-brand>
    <!-- 添加按钮 -->
    <div>
      <el-button class="btn" type="primary" plain size="small" @click="add">添加</el-button>
    </div>
    <!-- 列表的渲染 -->
    <v-list @edit="edit"></v-list>
    <!-- 弹框的渲染 -->
    <v-dialog ref="dialogInfo" @cancel="cancel" :info='info'></v-dialog>
  </div>
</template>

<script>
import vList from "./list";
import vDialog from "./dialog";
export default {
  data() {
    return {
      info: {
        isShow: false,
        isAdd: true
      }
    };
  },
  components: {
    vList,
    vDialog
  },
  methods: {
    add() {
      this.info.isShow = true;
      this.info.isAdd = true;
    },
    cancel(e) {
      this.info.isShow = e;
    },
    edit(e) {
      this.info.isShow = true;
      this.info.isAdd = false;
      this.$refs.dialogInfo.lookup(e);
    }
  }
};
</script>

<style  scoped>
.btn {
  margin: 30px;
}
</style>
